<template>
  <div class="PTZL">
    <el-card class="box-card" style="height: 200px">
      <div slot="header">
        <span style="font-weight: 700; font-size: 18px">数据质量控制概览</span>
        <span style="float: right">最后更新时间：{{ new Date() | time }}</span>
      </div>
      <ul class="_ul">
        <li class="_li">
          <span class="_num" style="color: #198eca">{{
            Overview.质控规则数 | numFormat
          }}</span>
          <br />
          质控规则数
        </li>
        <li class="_li">
          <span class="_num" style="color: #29c5a0">{{
            Overview.质控表数 | numFormat
          }}</span>
          <br />
          质控表数
        </li>
        <li class="_li">
          <span class="_num" style="color: #ea9466">{{
            Overview.质控字段数 | numFormat
          }}</span>
          <br />
          质控字段数
        </li>
        <li class="_li">
          <span class="_num" style="color: #eccd57">{{
            Overview.累计质控数 | numFormat
          }}</span>
          <br />
          累计质控数
        </li>
        <li class="_li">
          <span class="_num" style="color: #6eb26b">{{
            Overview.累计质控失败数 | numFormat
          }}</span>
          <br />
          累计质控失败数
        </li>
        <li class="_li">
          <span class="_num" style="color: #3fb2ad">{{
            Overview.累计质控成功数 | numFormat
          }}</span>
          <br />
          累计质控成功数
        </li>
      </ul>
    </el-card>

    <el-card
      class="box-card"
      style="height: 400px; width: 50%; display: inline-block"
    >
      <p style="font-size: 22px">登录记录</p>
      <div style="margin-top: 10px">
        <div style="display: inline-block; width: 20%">
          <el-image
            style="width: 100px; height: 100px; border-radius: 50%"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="fill"
          ></el-image>
        </div>
        <div style="display: inline-block; width: 70%">
          <span>
            登录机构： {{ LoginRecord.loginInfo.hospitalName }}
            <br />登录账户：{{ LoginRecord.loginInfo.userNo }}
            <br />登录姓名：{{ LoginRecord.loginInfo.userName }}
            <br />上次登录日期：{{ LoginRecord.loginInfo.passTime }}
            <br />登录次数：{{ LoginRecord.loginInfo.requestCount }}次</span
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 15px"
        height="200"
      >
        <el-table-column prop="date" label="登录日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="登录状态" width="80">
        </el-table-column>
        <el-table-column prop="address" label="描述"> </el-table-column>
      </el-table>
    </el-card>
    <el-card
      class="box-card"
      style="height: 400px; width: 50%; display: inline-block"
    >
      <p style="font-size: 22px">分类统计</p>
      <div class="_main-box1">
        <el-row>
          <el-col :span="4">
            <img
              src="../../assets/TJ1.png"
              width="60px"
              height="60px"
              style="margin-top: 20px; margin-left: 30px"
              alt="显示失败"
            />
          </el-col>
          <el-col :span="10">
            <p style="line-height: 50px; font-size: 22px; color: #5fb155">
              {{ CategoryCount.quantityCorrect | numFormat }}
            </p>
            <p style="font-size: 16px">累计质控成功数</p>
          </el-col>
          <el-col :span="10">
            <p style="line-height: 50px; font-size: 22px; color: red">
              {{ CategoryCount.quantityTodayCorrect | numFormat }}
            </p>
            <p style="font-size: 16px">今日新增成功数</p>
          </el-col>
        </el-row>
      </div>
      <div class="_main-box2">
        <el-row>
          <el-col :span="4">
            <img
              src="../../assets/TJ2.png"
              width="60px"
              height="60px"
              style="margin-top: 20px; margin-left: 30px"
              alt=""
            />
          </el-col>
          <el-col :span="10">
            <p style="line-height: 50px; font-size: 22px; color: #f08b5b">
              {{ 0 | numFormat }}
            </p>
            <p style="font-size: 16px">累计质控警告数</p>
          </el-col>
          <el-col :span="10">
            <p style="line-height: 50px; font-size: 22px; color: red">
              {{ 0 | numFormat }}
            </p>
            <p style="font-size: 16px">今日新增警告数</p>
          </el-col>
        </el-row>
      </div>
      <div class="_main-box3">
        <el-row>
          <el-col :span="4">
            <img
              src="../../assets/TJ3.png"
              width="60px"
              height="60px"
              style="margin-top: 20px; margin-left: 30px"
              alt=""
            />
          </el-col>
          <el-col :span="10">
            <p style="line-height: 50px; font-size: 22px; color: #32b1b6">
              {{ CategoryCount.quantityError | numFormat }}
            </p>
            <p style="font-size: 16px">累计质控问题数</p>
          </el-col>
          <el-col :span="10">
            <p style="line-height: 50px; font-size: 22px; color: red">
              {{ CategoryCount.quantityTodayError | numFormat }}
            </p>
            <p style="font-size: 16px">今日新增问题数</p>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card" style="height: 210px">
      <p style="font-size: 22px">情况分析</p>
      <el-row>
        <el-col :span="4">
          <p
            style="
              text-align: center;
              color: #33b7de;
              font-size: 22px;
              font-weight: 700;
              margin-top: 40px;
            "
          >
            总体评分
          </p>
          <p
            style="
              text-align: center;
              color: #33b7de;
              font-size: 22px;
              font-weight: 700;
            "
          >
            {{ Analysis.all }} 分
          </p>
        </el-col>
        <el-col :span="8" style="text-align: center"
          ><div
            id="main"
            :style="{
              width: '250px',
              height: '160px',
              display: 'inline-block',
            }"
          ></div
        ></el-col>
        <el-col :span="12">
          <div
            id="main2"
            :style="{
              width: '800px',
              height: '155px',
              display: 'inline-block',
            }"
          ></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      Overview: {
        质控规则数: 0,
        质控表数: 0,
        质控字段数: 0,
        累计质控数: 0,
        累计质控失败数: 0,
        累计质控成功数: 0,
      },
      LoginRecord: {},
      CategoryCount: {
        quantityCorrect: 0,
        quantityError: 0,
        quantityTodayCorrect: 0,
        quantityTodayError: 0,
      },
      Analysis: {},
      QualityData: {},
    };
  },
  mounted() {
    console.log(document.getElementById("main"));
    this.getData();
  },
  methods: {
    getData() {
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Home/Overview").then(
        (res) => {
          this.Overview.质控规则数 = res.data.count0;
          this.Overview.质控表数 = res.data.count1;
          this.Overview.质控字段数 = res.data.count2;
          this.Overview.累计质控数 = res.data.count3;
          this.Overview.累计质控失败数 = res.data.count4;
          this.Overview.累计质控成功数 = res.data.count5;
        }
      );
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Home/LoginRecord").then(
        (res) => {
          this.LoginRecord = res.data;
        }
      );
      this.$get(
        baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Home/CategoryCount"
      ).then((res) => {
        this.CategoryCount.quantityCorrect = res.data.quantityCorrect;
        this.CategoryCount.quantityError = res.data.quantityError;
        this.CategoryCount.quantityTodayCorrect = res.data.quantityTodayCorrect;
        this.CategoryCount.quantityTodayError = res.data.quantityTodayError;
      });
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Home/Analysis").then(
        (res) => {
          this.Analysis = res.data;
          this.drawLine();
        }
      );
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Home/QualityData").then(
        (res) => {
          this.QualityData = res.data;
          this.drawLine2();
        }
      );
    },
    init() {},
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "",
        },
        legend: {
          data: ["Allocated Budget"],
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "完整性", max: 100 },
            { name: "及时性", max: 100 },
            { name: "连续性", max: 100 },
            { name: "规范性", max: 100 },
            { name: "一致性", max: 100 },
          ],
          name: {
            textStyle: {
              padding: [-10, -14], // 控制文字padding
            },
          },
        },
        series: [
          {
            name: "",
            type: "radar",
            data: [
              {
                value: [
                  this.Analysis.完整性,
                  this.Analysis.时效性,
                  this.Analysis.连续性,
                  this.Analysis.规范性,
                  this.Analysis.一致性,
                ],
                name: "",
                itemStyle: {
                  //该数值区域样式设置
                  normal: {
                    color: "#F1A538", //背景颜色，还需设置areaStyle
                    lineStyle: {
                      color: "#F1A538", //边框颜色
                    },
                  },
                },
                label: {
                  //显示value中具体的数值
                  normal: {
                    show: false,
                    textStyle: {
                      //更改数值样式
                      color: "orange",
                    },
                  },
                },
                areaStyle: {
                  //设置区域背景颜色透明度
                  normal: {
                    width: 1,
                    opacity: 0.5,
                  },
                },
              },
            ],
          },
        ],
      });
    },
    drawLine2() {
      var time = [];
      var all = [];
      var correct = [];
      var error = [];
      for (var i in this.QualityData) {
        time.push(this.QualityData[i].date);
        all.push(this.QualityData[i].all);
        correct.push(this.QualityData[i].correct);
        error.push(this.QualityData[i].error);
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "质控数据情况",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["质控数量", "成功数量", "问题数量", "警告数量"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: time,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "质控数量",
            type: "line",
            stack: "1",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: all,
            smooth: true,
          },
          {
            name: "成功数量",
            type: "line",
            stack: "2",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: correct,
            smooth: true,
          },
          {
            name: "问题数量",
            type: "line",
            stack: "3",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: error,
            smooth: true,
          },
          {
            name: "警告数量",
            type: "line",
            stack: "4",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0, 0, 0],
            smooth: true,
          },
        ],
      });
    },
  },
  filters: {
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
    numFormat(num) {
      var c =
        num.toString().indexOf(".") !== -1
          ? num.toLocaleString()
          : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");

      return c;
    },
  },
};
</script>

<style scoped>
.PTZL {
  padding: 10px;
}
._ul {
  display: flex;
  justify-content: space-between;
}
._li {
  display: inline-block;
  padding: 20px;
  width: 250px;
  background-color: #ecf9fc;
  font-weight: 700;
}
._num {
  font-weight: 700;
  font-size: 22px;
}
._main-box1 {
  background-color: #fbfffc;
  border-left: 5px solid #5fb155;
  height: 100px;
  margin-bottom: 10px;
}
._main-box2 {
  background-color: #fffefa;
  border-left: 5px solid #f08b5b;
  height: 100px;
  margin-bottom: 10px;
}
._main-box3 {
  background-color: #f9fffe;
  border-left: 5px solid #32b1b6;
  height: 100px;
}
</style>
